<?php echo $this->render('./_common/header.phtml');?>
<?php //if()?>
<script
	type="text/javascript"
	src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script>
<script
	type="text/javascript"
	src="http://maps.google.com/maps/api/js?sensor=false"></script>
<link
	href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/base/jquery-ui.css"
	rel="stylesheet" type="text/css" />
<script type="text/javascript">
function getGmap() {
				
				var address = $('#addressInput').val();
				if(!$.trim(address).length) {
					alert('Vui lòng nhập địa chỉ !');
					return false;
				}
				else {
					//Hiển thị loading
					$('.loading').css('display', 'block');
					$('.map-frame').html('');
					
					var url = '<?php echo $this->baseUrl();?>/ajax/ajax_get_location_info.php';
					$.post(
						url, 
						{ address_value: address },
						function(result) {
							
							//Ẩn nút loading và hiển thị khung bản đồ
							$('.loading').css('display', 'none');
							$('.map-frame').html('<div id="result_map" style="width: 600px; height: 350px"></div>');

							var getData = $.parseJSON(result);
							var status = getData.status;
							var lat = getData.lat;
							var lng = getData.lng;
							var lname = document.getElementById("addressInput").value;
							// set value
							document.getElementById("longval").value = lng;
							document.getElementById("latval").value = lat;
							document.getElementById("locname").value = lname;
							document.getElementById("longvalreal").value = lng;
							document.getElementById("latvalreal").value = lat;
							document.getElementById("locnamereal").value = lname;
							document.getElementById("linkToNextAddex").style.display = 'block';
							if(status.indexOf('OK') != -1) {
								var myOptions = {
									zoom: 15,
									center: new google.maps.LatLng(lat, lng),
									mapTypeId: google.maps.MapTypeId.ROADMAP
								};
								var map = new google.maps.Map(document.getElementById("result_map"), myOptions);
								
								// Creating a marker and positioning it on the map
								var marker = new google.maps.Marker({
									position: new google.maps.LatLng(lat, lng),
									map: map,
									title: address
								});
							}
							else {
								alert('Có lỗi xảy ra');
								return false;
							}
						}
					);
				}
}
    </script>
<style>
.loading {
	background: url(http://localhost/p2/public/default/images/loading.gif)
		no-repeat;
	width: 220px;
	height: 19px;
	display: none;
	border: none;
}
</style>
<div class="container bigtoppadding midtoppadding">
	<section class="row midbottompadding bigtoppadding">
		<h5 class="black whitetext bold leftpadding rightpadding">Thêm mới địa
			điểm vào VnSpot.Net</h5>
	</section>
</div>
<div class="container white bigpadding">
	<section class="row">
		<div class="eight columns blackvertical">
			<div class="map-frame" id="map">
				<span class="loading"></span>
			</div>
		</div>
		<div class="four columns">
			<div class="row">
				<form method="get"
					action="<?php echo $this->baseUrl()?>/place/addex/"
					id="locationFrm" enctype="multipart/form-data">
					<p>
						<input type="hidden" value="" id="longval" name="longval"> 
						<input type="hidden" value="" id="latval" name="latval"> 
						<input type="hidden" value="" id="locname" name="locname">
					</p>
					<div id="linkToNextAddex" style="display: none;"><a href="javascript:void(0)" class="button"
						onclick="document.getElementById('locationFrm').submit();">Chưa phải địa điểm mà bạn mong muốn ?</a>
					</div>
				</form>
			</div>
			<div class="row">
				<dl class="field twelve columns">
					<dd> <label> Nhập tên địa điểm : </label> </dd>
					<dt class="text">
						<input type="text" name="placename" id="addressInput"
							onkeydown="if (event.keyCode == 13) getGmap();"
							placeholder="Enter để tìm kiếm địa điểm" value="<?php echo $this->arrParam['locnamereal']; ?>"/>
					</dt>
				</dl>
				<p class="meta">Ví dụ : Số 8 Tôn Thất Thuyết, Cầu Giấy, Hà Nội</p>

				<form method="post" action="" id="addPlaceFrm"
					enctype="multipart/form-data">
					<div class="row">
						<dl class="field twelve columns">
							<dd>
								<label>Ảnh : </label>
							</dd>
							<dt>
								<?php echo $this->formFile('picture');?>
							</dt>
						</dl>
					</div>
					<div class="row">
						<dl class="field twelve columns">
							<dd>
								<label>Mô tả địa điểm : </label>
							</dd>
							<dt>
							<script type="text/javascript"
								src="<?php echo $this->baseUrl();?>/public/default/js/nicEdit-latest.js"></script>
							<script type="text/javascript">
								//<![CDATA[
  								bkLib.onDomLoaded(function() {
        						new nicEditor({buttonList : ['fontSize','bold','italic','underline','strikeThrough','subscript','superscript','html','image']}).panelInstance('placeDescription');
  								});
  								//]]>
  							</script>
							<textarea style="width: 100%" name="description" id="placeDescription" placeholder="Nhập vào mô tả cho địa điểm này" title="Nhập vào mô tả cho địa điểm này" ><?php echo $this->arrParam['description']; ?></textarea>
							</dt>
						</dl>
					</div>
					<input type="hidden" value="" id="longvalreal" name="longvalreal"> 
					<input type="hidden" value="" id="latvalreal" name="latvalreal"> 
					<input type="hidden" value="" id="locnamereal" name="locnamereal">
					<div class="row">
						<input class="submit twelve columns" type="submit"
							value="Thêm địa điểm này" id="submit" />
					</div>
				</form>
			</div>			
			<div class="row midmargin blackhorizontal"></div>
			<h5 class="blacktext extrabold midbottommargin">Top check in</h5>
			<ul class="smallfont leftpadding">
				<li class="blacktext icon-chevron-right">&nbsp; Hà nội</li>
				<li class="blacktext icon-chevron-right">&nbsp; Huế</li>
				<li class="blacktext icon-chevron-right">&nbsp; Sài Gòn</li>
			</ul>
		</div>
	</section>
</div>
<!-- end of #container -->

<?php echo $this->render('./_common/footer.phtml');?>
<script type="text/javascript">
 $(document).ready(function(){
  var mapOptions = {
       zoom: 15,
       mapTypeId: google.maps.MapTypeId.ROADMAP,
       center: new google.maps.LatLng(<?php if(isset($this->arrParam['latvalreal'])) echo $this->arrParam['latvalreal']; else echo '21.0287108 ';?>,<?php if(isset($this->arrParam['longvalreal'])) echo $this->arrParam['longvalreal']; else echo '105.7822359';?>)
     };

  var map = new google.maps.Map(document.getElementById("map"),mapOptions);

  var geocoder = new google.maps.Geocoder();  

     $(function() {
         $("#addressInput").autocomplete({
         
           source: function(request, response) {

          if (geocoder == null){
           geocoder = new google.maps.Geocoder();
          }
             geocoder.geocode( {'address': request.term }, function(results, status) {
               if (status == google.maps.GeocoderStatus.OK) {

                  var searchLoc = results[0].geometry.location;
               var lat = results[0].geometry.location.lat();
                  var lng = results[0].geometry.location.lng();
                  var latlng = new google.maps.LatLng(lat, lng);
                  var bounds = results[0].geometry.bounds;

                  geocoder.geocode({'latLng': latlng}, function(results1, status1) {
                      if (status1 == google.maps.GeocoderStatus.OK) {
                        if (results1[1]) {
                         response($.map(results1, function(loc) {
                        return {
                            label  : loc.formatted_address,
                            value  : loc.formatted_address,
                            bounds   : loc.geometry.bounds
                          }
                        }));
                        }
                      }
                    });
            }
              });
           },
           select: function(event,ui){
      var pos = ui.item.position;
      var lct = ui.item.locType;
      var bounds = ui.item.bounds;

      if (bounds){
       map.fitBounds(bounds);
      }
           }
         });
     });   
 });
</script>
